<template>
  <div class="layout">
    <!-- 左侧导航 -->
    <div class="game-nav" :class="{ 'nav-collapsed': !showNav }">
      <div class="nav-header">
        <h3>游戏目录</h3>
        <button class="collapse-button" @click="toggleNav">
          <svg viewBox="0 0 24 24" class="collapse-icon" :class="{ 'rotated': !showNav }">
            <path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
          </svg>
        </button>
      </div>

      <div class="game-list">
        <router-link
          v-for="game in games"
          :key="game.id"
          :to="game.path"
          class="game-item"
          :class="{ active: currentPath === game.path }"
        >
          <div class="game-icon">
            <component :is="game.icon" />
          </div>
          <div class="game-info">
            <span class="game-name">{{ game.name }}</span>
            <span class="game-desc">{{ game.description }}</span>
            <div class="game-tags">
              <span class="game-tag" :class="game.difficulty">{{ difficultyLabels[game.difficulty] }}</span>
              <span class="game-tag category">{{ game.category }}</span>
            </div>
          </div>
        </router-link>
      </div>
    </div>

    <!-- 添加一个遮罩层用于移动端 -->
    <div v-if="!showNav" class="nav-overlay" @click="toggleNav"></div>

    <!-- 右侧内容区 -->
    <div class="content-area" :class="{ 'nav-collapsed': !showNav }">
      <div class="expand-button" v-if="!showNav" @click="toggleNav">
        <svg viewBox="0 0 24 24" class="expand-icon">
          <path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { h } from 'vue'

const route = useRoute()
const showNav = ref(true)

// 当前路径
const currentPath = computed(() => route.path)

// 摩托车图标
const MotorcycleIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M19.44,9.03L15.41,5H11L12.29,7.58L18.5,13.79L19.44,9.03M20.38,10.38L18.5,15.38L17.38,14.26L16.5,17.38L15.38,16.26L14.5,19.38L13.38,18.26L12.5,21.38L11.38,20.26L10.5,23.38L9.5,22.38L10.38,19.38L9.26,18.26L10.38,15.38L9.26,14.26L10.38,11.38L9.26,10.26L10.38,7.38L11.5,8.5L15.5,4.5L20.38,9.38L20.38,10.38M20.5,3.5L19.5,2.5L14.38,7.38L13.5,10.5L17.5,14.5L20.5,3.5Z'
  })
])

// 游戏图标组件
const TetrisIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M20 11V9c0-.55-.45-1-1-1h-2V6c0-.55-.45-1-1-1h-2V3c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v2H4c-.55 0-1 .45-1 1v2H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V11h1c.55 0 1-.45 1-1z'
  })
])

const SnakeIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M20 5h-4V4c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1H4c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z'
  })
])

const RunnerIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7'
  })
])

// 添加时间大盗图标
const TimeThiefIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z'
  })
])

// 添加太空大战图标
const SpaceWarIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M15.82 13.55l-5.09-.43 1.66 4.73-1.93.65-1.67-4.78-3.73 3.5L4 15.77l3.78-3.55-4.75-1.64.66-1.92 4.73 1.63-.42-5.03h2l-.42 5.03 4.74-1.63.66 1.92-4.75 1.64L14 15.77l-1.06 1.45-3.73-3.5-1.68 4.78-1.93-.65 1.67-4.73-5.09.43v-2l5.09.43-1.67-4.73 1.93-.65 1.68 4.78 3.73-3.5L14 8.23l-3.78 3.55 4.75 1.64-.66 1.92-4.74-1.63.42 5.03h-2l.42-5.03-4.74 1.63-.66-1.92 4.75-1.64L4 8.23l1.06-1.45 3.73 3.5 1.67-4.78 1.93.65-1.66 4.73 5.09-.43v2z'
  })
])

// 添加切水果图标
const FruitNinjaIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M12.78 11h-1.56l-1.5-3h4.56l-1.5 3zM11 14v-2h2v2h-2zm1-13C6.48 1 2 5.48 2 11s4.48 10 10 10 10-4.48 10-10S17.52 1 12 1zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'
  })
])

// 添加数独图标
const SudokuIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M20,2H4C2.9,2 2,2.9 2,4V20C2,21.1 2.9,22 4,22H20C21.1,22 22,21.1 22,20V4C22,2.9 21.1,2 20,2M4,4H8V8H4V4M14,4H18V8H14V4M4,10H8V14H4V10M10,4H14V8H10V4M14,10H18V14H14V10M4,16H8V20H4V16M10,16H14V20H10V16M16,10H20V14H16V10M16,16H20V20H16V16M10,10H14V14H10V10'
  })
])

// 添加围棋图标
const GoGameIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,4C16.42,4 20,7.58 20,12C20,16.42 16.42,20 12,20C7.58,20 4,16.42 4,12C4,7.58 7.58,4 12,4M15,12A3,3 0 0,0 12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12Z'
  })
])

// 添加五子棋图标
const GomokuIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,4C16.42,4 20,7.58 20,12C20,16.42 16.42,20 12,20C7.58,20 4,16.42 4,12C4,7.58 7.58,4 12,4M9,9A1,1 0 0,0 8,10A1,1 0 0,0 9,11A1,1 0 0,0 10,10A1,1 0 0,0 9,9M15,9A1,1 0 0,0 14,10A1,1 0 0,0 15,11A1,1 0 0,0 16,10A1,1 0 0,0 15,9M12,6A1,1 0 0,0 11,7A1,1 0 0,0 12,8A1,1 0 0,0 13,7A1,1 0 0,0 12,6M12,12A1,1 0 0,0 11,13A1,1 0 0,0 12,14A1,1 0 0,0 13,13A1,1 0 0,0 12,12Z'
  })
])

// 添加超级玛丽图标
const MarioIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M13,4V6H15V8H13V10H15V12H13V14H15V16H13V18H15V20H13V22H11V20H9V18H11V16H9V14H11V12H9V10H11V8H9V6H11V4H13M3,16H5V18H3V16M19,16H21V18H19V16Z'
  })
])

// 添加扫雷图标
const MinesweeperIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  class: 'game-svg-icon'
}, [
  h('path', {
    fill: 'currentColor',
    d: 'M23,13V11H19.93C19.75,9.58 19.19,8.23 18.31,7.1L20.5,4.93L19.07,3.5L16.9,5.69C15.77,4.81 14.42,4.25 13,4.07V1H11V4.07C9.58,4.25 8.23,4.81 7.1,5.69L4.93,3.5L3.5,4.93L5.69,7.1C4.81,8.23 4.25,9.58 4.07,11H1V13H4.07C4.25,14.42 4.81,15.77 5.69,16.9L3.5,19.07L4.93,20.5L7.1,18.31C8.23,19.19 9.58,19.75 11,19.93V23H13V19.93C14.42,19.75 15.77,19.19 16.9,18.31L19.07,20.5L20.5,19.07L18.31,16.9C19.19,15.77 19.75,14.42 19.93,13H23M12,8A4,4 0 0,0 8,12H6A6,6 0 0,1 12,6V8Z'
  })
])

// 难度标签
const difficultyLabels = {
  easy: '简单',
  medium: '中等',
  hard: '困难'
}

// 游戏列表
const games = [
  {
    id: 'goGame',
    name: 'AI围棋',
    path: '/games/goGame',
    icon: GoGameIcon,
    description: '与AI对弈围棋，提升您的战略思维和棋艺水平。',
    difficulty: 'hard',
    category: '策略'
  },
  {
    id: 'gomoku',
    name: '五子棋',
    path: '/games/gomoku',
    icon: GomokuIcon,
    description: '经典的五子棋游戏，横、竖、斜五子相连即可获胜。',
    difficulty: 'medium',
    category: '策略'
  },
  {
    id: 'mario',
    name: '超级玛丽',
    path: '/games/mario',
    icon: MarioIcon,
    description: '经典平台跳跃游戏，控制玛丽奥收集金币，踩扁敌人，拯救公主。',
    difficulty: 'medium',
    category: '冒险'
  },
  {
    id: 'minesweeper',
    name: '扫雷',
    path: '/games/minesweeper',
    icon: MinesweeperIcon,
    description: '经典的扫雷游戏，考验你的逻辑推理能力和运气。',
    difficulty: 'medium',
    category: '益智'
  },
  {
    id: 'tetris',
    name: '俄罗斯方块',
    path: '/games/tetris',
    icon: TetrisIcon,
    description: '经典的俄罗斯方块游戏，考验你的空间思维和反应能力。',
    difficulty: 'medium',
    category: '益智'
  },
  {
    id: 'snake',
    name: '贪吃蛇',
    path: '/games/snake',
    icon: SnakeIcon,
    description: '控制蛇吃食物成长，但不要撞到墙或自己的身体。',
    difficulty: 'easy',
    category: '休闲'
  },
  {
    id: 'runner',
    name: '小鸡快跑',
    path: '/games/runner',
    icon: RunnerIcon,
    description: '控制小鸡跳跃躲避障碍物，看看你能跑多远。',
    difficulty: 'easy',
    category: '动作'
  },
  {
    id: 'timeThief',
    name: '时间大盗',
    path: '/games/timeThief',
    icon: TimeThiefIcon,
    description: '在时空中穿梭，收集时间硬币，躲避时间管理员的追捕。',
    difficulty: 'medium',
    category: '动作'
  },
  {
    id: 'spaceWar',
    name: '太空大战',
    path: '/games/spaceWar',
    icon: SpaceWarIcon,
    description: '驾驶高科技战机，在银河系中与敌人展开激烈对决。',
    difficulty: 'medium',
    category: '射击'
  },
  {
    id: 'fruitNinja',
    name: '切水果',
    path: '/games/fruitNinja',
    icon: FruitNinjaIcon,
    description: '挥动利刃切开飞舞的水果，小心炸弹，追求最高连击。',
    difficulty: 'easy',
    category: '动作'
  },
  {
    id: 'sudoku',
    name: '数独',
    path: '/games/sudoku',
    icon: SudokuIcon,
    description: '经典数独游戏，考验你的逻辑推理能力。',
    difficulty: 'medium',
    category: '益智'
  }

]

const toggleNav = () => {
  showNav.value = !showNav.value
}
</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
  background-color: #f8fafc;
}

.game-nav {
  width: 240px;
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
}

.nav-collapsed {
  width: 0;
  overflow: hidden;
}

.nav-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
}

.nav-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.collapse-button {
  padding: 4px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.collapse-button:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.collapse-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.collapse-icon.rotated {
  transform: rotate(180deg);
}

.game-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.game-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.game-item:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.game-item.active {
  background-color: #e2e8f0;
  color: #1e293b;
}

.game-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.game-svg-icon {
  width: 100%;
  height: 100%;
}

.game-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-desc {
  font-size: 12px;
  color: #94a3b8;
}

.game-tags {
  display: flex;
  gap: 8px;
}

.game-tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.game-tag.easy {
  background-color: #dcfce7;
  color: #166534;
}

.game-tag.medium {
  background-color: #fef9c3;
  color: #854d0e;
}

.game-tag.hard {
  background-color: #fee2e2;
  color: #991b1b;
}

.game-tag.category {
  background-color: #e2e8f0;
  color: #475569;
}

.game-name {
  font-size: 14px;
}

.content-area {
  flex: 1;
  overflow: hidden;
  transition: margin-left 0.3s ease;
}

.expand-button {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  background-color: var(--theme-bg, #ffffff);
  border: 1px solid var(--theme-border-color, #e2e8f0);
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  z-index: 99;
  transition: all 0.2s;
}

.expand-button:hover {
  background-color: var(--theme-hover-bg, #f1f5f9);
}

.expand-icon {
  width: 20px;
  height: 20px;
  color: var(--theme-text-color, #64748b);
}

.nav-overlay {
  display: none;
}

/* 暗色主题 */
@media (prefers-color-scheme: dark) {
  .layout {
    background-color: #0f172a;
  }

  .game-nav {
    background-color: #1e293b;
    border-color: #334155;
  }

  .nav-header {
    border-color: #334155;
  }

  .nav-header h3 {
    color: #e2e8f0;
  }

  .collapse-button:hover {
    background-color: #334155;
    color: #e2e8f0;
  }

  .game-item {
    color: #94a3b8;
  }

  .game-item:hover {
    background-color: #334155;
    color: #e2e8f0;
  }

  .game-item.active {
    background-color: #475569;
    color: #e2e8f0;
  }

  .game-tag.category {
    background-color: #334155;
    color: #cbd5e1;
  }

  .game-desc {
    color: #64748b;
  }

  .expand-button {
    background-color: var(--theme-bg, #1e293b);
    border-color: var(--theme-border-color, #334155);
  }

  .expand-button:hover {
    background-color: var(--theme-hover-bg, #334155);
  }

  .expand-icon {
    color: var(--theme-text-color, #94a3b8);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .game-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
  }

  .content-area {
    margin-left: 0;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 90;
  }

  .expand-button {
    display: none;
  }
}

/* 为时间大盗添加特殊的图标效果 */
.game-item:hover .game-svg-icon {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 为太空大战添加特殊的图标效果 */
.game-item[href*="spaceWar"] .game-svg-icon {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 为切水果添加特殊的图标效果 */
.game-item[href*="fruitNinja"] .game-svg-icon {
  animation: slash 2s ease-in-out infinite;
}

@keyframes slash {
  0% { transform: rotate(-30deg); }
  20% { transform: rotate(30deg); }
  40% { transform: rotate(-30deg); }
  100% { transform: rotate(-30deg); }
}

/* 为超级玛丽添加特殊的图标效果 */
.game-item[href*="mario"] .game-svg-icon {
  animation: jump 1.5s ease-in-out infinite;
}

@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* 为扫雷添加特殊的图标效果 */
.game-item[href*="minesweeper"] .game-svg-icon {
  animation: pulse 2s ease-in-out infinite;
}
</style>
